<template>
  <div class="grid-content bg-purple">
    <div class="header">
      <p>运输任务</p>
      <div class="refresh-box">查看更多 ></div>
    </div>
    <div class="ball-chart-box">
      <template>
        <!-- <el-table
          :data="transportTaskList"
          style="width: 100%"
          class="top"
          :show-summary="false"
          :show-body="false"
        >
          <el-table-column show-overflow-tooltip prop="id" label="任务编号" width="77px" />
          <el-table-column show-overflow-tooltip prop="startAgency" label="起始地" />
          <el-table-column show-overflow-tooltip prop="endAgency" label="目的地" />
          <el-table-column show-overflow-tooltip prop="licensePlate" label="车辆" />
          <el-table-column show-overflow-tooltip prop="status" label="任务状态" width="77px" />
        </el-table> -->
        <table>
          <tr>
            <th width="77px">任务编号</th>
            <th width="100px">起始地</th>
            <th width="100px">目的地</th>
            <th width="100px">车辆</th>
            <th width="77px">任务状态</th>
          </tr>
        </table>
        <!-- 表格内容滚动 -->
        <vue-seamless-scroll
          :data="transportTaskList"
          class="seamless-warp"
          style="width: 100%"
          :class-option="classOption"
        >
          <el-table
            :data="transportTaskList"
            style="width: 100%"
            :show-header="false"
          >
            <el-table-column show-overflow-tooltip prop="id" label="任务编号" width="77px" />
            <el-table-column show-overflow-tooltip prop="startAgency" label="起始地" />
            <el-table-column show-overflow-tooltip prop="endAgency" label="目的地" />
            <el-table-column show-overflow-tooltip prop="licensePlate" label="车辆" />
            <el-table-column show-overflow-tooltip prop="st" label="任务状态" width="77px" />
          </el-table>
        </vue-seamless-scroll>

      </template>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['transportTaskList']),
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created() {
    this.transportTaskList.forEach(item => {
      item.st = item.status === 1 ? '已完成' : '进行中'
    })
  }
}
</script>

<style lang="scss" scoped>
.grid-content {
  // height: 230px;
  border-radius: 4px;
  min-height: 36px;
  font-size: 16px;
  padding: 23px 20px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    p {
      font-size: 16px;
      font-weight: 700;
    }
    .refresh-box {
      font-size: 14px;
      color: #818693;
    }
  }
  .ball-chart-box {
    position: relative;
    width: 490px;
    height: 400px;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
     overflow: hidden; //
  }
}
</style>

<style lang="scss" scoped>
.seamless-warp {
  height: 400px;
  overflow: hidden;
}
 .min {
  display: flex;
  width: 100%;
}
// .top .el-table__body-wrapper {
//   display: none;
// }
//  .bottom .el-table__header-wrapper {
//   display: none;
//   width: 100%;
// }
</style>
